<template>
  <div v-if="visible"
       class='choose-checkitem-container'>
    <el-dialog title="关联检查项"
               :visible.sync="visible"
               :close-on-click-modal="false"
               @close="dialogClose">
      <el-form :model="requestParam"
               label-width="100px">
        <el-row>
          <el-col :span="10"
                  :offset="9"
                  class="align-right">
            <el-form-item prop="check_item_name"
                          label="检查项名称">
              <el-input v-model="requestParam.check_item_name"
                        placeholder="请输入检查项名称"></el-input>
            </el-form-item>

          </el-col>
          <el-col :span="5"
                  class="align-right">
            <el-button @click="search"
                       type="primary">搜索</el-button>
            <el-button @click="reset">重置</el-button>
          </el-col>
        </el-row>
      </el-form>

      <el-table :data="unbindCheckItemList.list"
                ref="checkItemList">
        <el-table-column type="selection">
        </el-table-column>
        <el-table-column prop="check_item_name"
                         label="检查项名称">
        </el-table-column>
        <el-table-column prop="config_num"
                         label="配置数量">
        </el-table-column>

        <el-table-column prop="updated_at"
                         label="更新时间">
        </el-table-column>
        <el-table-column prop="remark"
                         label="备注">
        </el-table-column>

      </el-table>
      <el-pagination @current-change="handlePageChange"
                     @size-change="handleSizeChange"
                     :current-page="requestParam.page"
                     :page-size="requestParam.page_size"
                     layout="total,sizes,prev, pager, next, jumper"
                     background
                     :total="unbindCheckItemList.total_count"
                     align="center">
      </el-pagination>
      <div slot="footer"
           class="dialog-footer">
        <el-button @click="dialogClose">取 消</el-button>
        <el-button @click="chooseCheckItem"
                   type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { CommonCheckApi } from '@/services/SystemSetting'
export default {
  data () {
    return {
      visible: false,
      // 获取未绑定检查项列表
      requestParam: {
        check_module_id: '',
        check_item_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      resetParam: {
        check_module_id: '',
        check_item_name: '',
        is_page: 1,
        page: 1,
        page_size: 10
      },
      // 未绑定检查项列表
      unbindCheckItemList: {
        list: [],
        page: 1,
        total_count: 10
      },

    }
  },
  props: {
    dialogVisible: {
      type: Boolean
    },

    moduleId: {
      type: String
    },
    callback: {
      type: Function
    }
  },
  watch: {
    dialogVisible (newval) {
      this.visible = newval;
      if (this.visible && this.requestParam.check_module_id) {
        this.getUnbindCheckItemList()
      }
    },
    moduleId: {
      handler (newval, oldval) {

        let reset = JSON.parse(JSON.stringify(this.resetParam))
        this.requestParam = reset
        this.requestParam.check_module_id = newval
        this.getUnbindCheckItemList()
      },
      deep: true
    }
  },
  methods: {
    handleSizeChange (size) {
      this.requestParam.page_size = size
      this.requestParam.page = 1
      this.getUnbindCheckItemList()
    },
    handlePageChange (page) {
      this.requestParam.page = page
      this.getUnbindCheckItemList()
    },
    search () {
      this.requestParam.page = 1
      this.getUnbindCheckItemList()
    },
    reset () {
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      reset.check_module_id = this.requestParam.check_module_id
      this.requestParam = Object.assign(this.requestParam, reset)
      this.getUnbindCheckItemList()
    },
    dialogClose () {
      this.$emit("update:dialogVisible", false);
    },
    // 获取未绑定检查项列表
    getUnbindCheckItemList () {
      CommonCheckApi.getCheckModuleItemList({
        params: this.requestParam
      }).then(res => {
        if (res.code === 0) {
          this.unbindCheckItemList = res.data
        }
      })
    },
    // 选择要绑定的检查项
    chooseCheckItem () {
      let selection = this.$refs.checkItemList.selection
      CommonCheckApi.editCheckModuleItem({
        data: {
          check_module_id: this.requestParam.check_module_id,
          is_add: 1,
          module_config: selection
        }
      }).then(res => {
        if (res.code === 0) {
          this.$message.success('绑定检查项成功')
          this.$emit('callback', '')
          this.dialogClose()
        }
      })
      console.log(this.$refs.checkItemList.selection, 'choose check item')
    }
  },
  created () {
    let reset = JSON.parse(JSON.stringify(this.resetParam))
    this.requestParam = reset
    this.requestParam.check_module_id = this.moduleId
    this.getUnbindCheckItemList()
  },
  mounted () {
  }
}
</script>
<style scoped lang='scss'>
.choose-checkitem-container {
  .el-pagination {
    margin-top: 20px;
  }
}
</style>